<template>
  <div>
    <el-container>
      <el-header :style="{
         height: '200px',
      }">
       <div class="barchart">
         <Barchart></Barchart>
       </div>
      </el-header>
      <el-main>
        <div
          class="HelloWorld echart-box"
          id="myChart1"
          :style="{
            width: '400px',
            height: '400px',
            background: '#ffffff',
            display: 'inline-block',
          }"
        ></div>
        <div
          class="circle"
          id="myChart2"
          :style="{
            width: '400px',
            height: '400px',
            background: '#ffffff',
            display: 'inline-block',
          }"
        ></div>

        <div :style="{display: 'inline-block'}">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="交易类型">
              <el-select v-model="form.typeId" placeholder="请选择活动区域">
                <el-option label="就诊处" value="0"></el-option>
                <el-option label="挂号处" value="1"></el-option>
                 <el-option label="问答处" value="2"></el-option>
                  <el-option label="其他" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="交易状态">
              <el-select v-model="form.status" placeholder="请选择活动区域">
                <el-option label="未支付" value="0"></el-option>
                <el-option label="已支付" value="1"></el-option>
                <el-option label="确认收款" value="2"></el-option>
                <el-option label="申请退款" value="3"></el-option>
                <el-option label="已退款" value="4"></el-option>
                <el-option label="部分支付" value="5"></el-option>
                <el-option label="完成交易" value="6"></el-option>
              </el-select>
            </el-form-item>

            <el-col>
              <el-button @click="getTable">查询</el-button>
            </el-col>
          </el-form>
        </div>

        <template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号" width="180">
            </el-table-column>
            <el-table-column prop="orderCode" label="客户订单号" width="180">
            </el-table-column>
            <el-table-column prop="olPayPart" label="在线支付部分">
            </el-table-column>
            <el-table-column
              prop="typeId"
              label="收费类型"
              :formatter="typeChange"
            >
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                {{ scope.row.status | filterType }}
              </template>
            </el-table-column>
            <el-table-column prop="addtime" label="交易时间"> </el-table-column>
          </el-table>
          <pagination
            :input_data.sync="tableData2"
            :output_data.sync="tableData"
          >
          </pagination>
        </template>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Barchart from "@/views/test/head.vue"
import Pagination from "@/views/test/zujian.vue";
import { getCarepkg, getType, getList } from "@/api/carepkg/carepkg";
export default {
  data() {
    return {
      form:{},
      tableData: [],
      tableData2: [],
      aa: "",
      // 定义图表，各种参数
      msg: "扇形图",
      datas: [],
      datas1: [],
      all: "",
    };
  },
  mounted: function () {
    this.drawLine(); //按照默认值绘制图表
    this.oreCharts();
    // this.getList();
  },
  created() {
    console.log("created");
    this.getList();
    this.getCire();
    this.getTable();

    console.log("created-end");
  },
  components: { Pagination ,Barchart},
  watch: {
    datas: {
      handler: function () {
        this.drawLine();
      },
      deep: true,
    },
    datas1: {
      handler: function () {
        this.oreCharts();
      },
      deep: true,
    },
  },
  filters: {
    filterType(val) {
      var types = [
        "未支付",
        "已支付",
        "确认收款",
        "申请退款",
        "已退款",
        "部分支付",
        "完成交易",
      ];
      return types[val];
    },
  },
  methods: {
    //类型渲染
    typeChange(row, column, cellValue) {
      if (cellValue === 1) {
        return "挂号处";
      } else if (cellValue === 0) {
        return "就诊处";
      }
       else if (cellValue === 2) {
        return "问答处";
      }
       else {
        return "其他";
      }
    },
    //渲染列表
    getTable() {
      console.log(this.form+"thisform");
      getList(this.form).then((response) => {
        if (response.code == 200) {
          this.tableData2 = response.data;
          this.$message({
            message: "ok",
            type: "success",
          });
        } else {
          this.$message({
            message: "error",
            type: "error",
          });
        }
      });
    },
    getList() {
      getCarepkg().then((response) => {
        //  this.datas.length = 0;


        if (response.code == 200) {
          // this.datas.length = 0; //清空数组
          // for (let i = 0; i < response.data.length; i++) {
          //   this.datas.push(response.data[i]);
          //   console.log(this.datas+"datas");
          // }
          var item = {
            value: response.data[0].amounts,
            name: "总费用收入",
          };
          this.all = item;
          var item1 = {
            value: response.data[0].olpays,
            name: "在线支付收入",
          };
          var item2 = {
            value: response.data[0].others,
            name: "其他支付收入",
          };
          this.datas.push(item);
          this.datas.push(item1);
          this.datas.push(item2);
        }
      });
    },
    getCire() {
      getType().then((response) => {
        if (response.code == 200) {
          this.datas1.length = 0; //清空数组
          for (let i = 0; i < response.data.length; i++) {
            this.datas1.push(response.data[i]);
            console.log(
              this.datas1[i].name + "datas2======" + response.data.length
            );
          }
        }
      });
    },
    drawLine() {
      // 1、基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart1"));
      //2、构造图表数据
      let options = {
        title: {
          text: "医院收入总览",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["总费用收入", "在线支付收入", "其他支付收入"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: this.datas,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 3、绘制图表
      myChart.setOption(options);
    },
    oreCharts() {
      let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
      let option = {
        title: {
          text: "各类收入统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",

          left: "left",
        },
        series: [
          {
            name: "来源",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.datas1,
          },
        ],
      };

      option && myChart2.setOption(option);
    },
    getMap() {},
  },
};
</script>
<style>
.divStyle {
  display: inline-block;
}
.div01 {
  width: 100%;
  height: 240px;
}
.div02 {
  width: 300px;
  height: 240px;
  background: paleturquoise;
  margin: 40px;
}
.div03 {
  width: 700px;
  height: 30%;
  margin: 30px;

  background: paleturquoise;
}
.div04 {
  width: 700px;
  height: 30%;
  margin: 50px;

  background: red;
  margin: 30px;
}
.div-big {
  width: 800px;
  height: 70%;
  margin-bottom: 60px;
  background: white;
}
 .barchart{
    width: 100%;
    height: 100%;
    margin-top: 20px;
  }
</style>>

